<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
            <el-form-item label="单据编码" prop="billCode">
                <el-input
                    v-model="queryParams.billCode"
                    placeholder="请输入单据编码"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="流程状态" prop="status">
                <el-select
                    v-model="queryParams.status"
                    placeholder="请选择流程状态"
                    clearable
                >
                    <el-option
                        v-for="dict in dict.type.oa_flow_billstatus"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="责任人" prop="dutyUser">
                <el-input
                    v-model="queryParams.dutyUser"
                    placeholder="请输入责任人"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="岗位" prop="demandPostId">
                <el-select
                    v-model="queryParams.demandPostId"
                    placeholder="请选择岗位"
                >
                    <el-option
                        v-for="item in postOptions"
                        :key="item.postId"
                        :label="item.postName"
                        :value="item.postId"
                        :disabled="item.status == 1"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="完成状态" prop="finishStatus">
                <el-select
                    v-model="queryParams.finishStatus"
                    placeholder="请选择完成状态"
                    clearable
                >
                    <el-option
                        v-for="dict in dict.type.progress_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <TableCard>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                        v-hasPermi="['hrm:recruitPlan:add']"
                    >
                        新增
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                        type="warning"
                        plain
                        icon="el-icon-download"
                        size="mini"
                        @click="handleExport"
                        v-hasPermi="['hrm:recruitPlan:export']"
                    >
                        导出
                    </el-button>
                </el-col>
                <right-toolbar
                    :showSearch.sync="showSearch"
                    @queryTable="getList"
                ></right-toolbar>
            </el-row>

            <el-table
                :border="Global.tableShowBorder"
                v-loading="loading"
                :data="recruitPlanList"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column
                    label="单据编码"
                    width="200"
                    align="center"
                    prop="billCode"
                />
                <el-table-column
                    label="相关需求"
                    width="300"
                    align="center"
                    prop="demandTitle"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="需求部门"
                    width="280"
                    align="center"
                    prop="demandDeptName"
                />
                <el-table-column
                    label="岗位"
                    width="250"
                    align="center"
                    prop="demandPostName"
                />
                <el-table-column
                    label="需要数量"
                    width="180"
                    align="center"
                    prop="demandCount"
                >
                    <template slot-scope="scope">
                        {{ scope.row.demandCount }} 人
                    </template>
                </el-table-column>
                <el-table-column
                    label="确认入职数量"
                    width="180"
                    align="center"
                    prop="sealCount"
                >
                    <template slot-scope="scope">
                        {{ scope.row.sealCount }} 人
                    </template>
                </el-table-column>
                <el-table-column
                    label="薪资范围"
                    width="250"
                    align="center"
                    prop="salaryMin"
                >
                    <template slot-scope="scope">
                        {{ scope.row.salaryMin }} - {{ scope.row.salaryMax }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="岗位需求"
                    width="250"
                    align="center"
                    prop="postDemand"
                >
                    <template slot-scope="scope">
                        <el-tooltip placement="top">
                            <div slot="content">
                                <div v-html="scope.row.postDemand"></div>
                            </div>
                            <el-button size="mini" type="text"
                                >岗位需求</el-button
                            >
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                    label="计划开始时间"
                    align="center"
                    prop="planStartTime"
                    width="180"
                >
                    <template slot-scope="scope">
                        <span>{{
                            parseTime(scope.row.planStartTime, "{y}-{m}-{d}")
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="计划完成时间"
                    align="center"
                    prop="planCompleteTime"
                    width="180"
                >
                    <template slot-scope="scope">
                        <span>{{
                            parseTime(scope.row.planCompleteTime, "{y}-{m}-{d}")
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="责任人"
                    width="250"
                    align="center"
                    prop="dutyUser"
                />
                <el-table-column
                    label="完成状态"
                    width="250"
                    align="center"
                    prop="finishStatus"
                >
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.progress_status"
                            :value="scope.row.finishStatus"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    label="提交时间"
                    align="center"
                    prop="submitTime"
                    width="180"
                >
                    <template slot-scope="scope">
                        <span>{{
                            parseTime(scope.row.submitTime, "{y}-{m}-{d}")
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="流程状态"
                    width="250"
                    align="center"
                    prop="status"
                >
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.oa_flow_billstatus"
                            :value="scope.row.status"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="250"
                    align="center"
                    class-name="small-padding fixed-width"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            v-show="
                                scope.row.status == '0' ||
                                scope.row.status == '3'
                            "
                            icon="el-icon-check"
                            @click="doSubmitFlow(scope.row)"
                            v-hasPermi="['hrm:recruitPlan:edit']"
                            >提交审批</el-button
                        >
                        <el-button
                            size="mini"
                            type="text"
                            v-show="
                                scope.row.status == '0' ||
                                scope.row.status == '3'
                            "
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['hrm:recruitPlan:edit']"
                            >修改</el-button
                        >
                        <el-button
                            size="mini"
                            type="text"
                            v-show="
                                scope.row.status == '0' ||
                                scope.row.status == '3'
                            "
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-hasPermi="['hrm:recruitPlan:remove']"
                            >删除</el-button
                        >

                        <el-button
                            size="mini"
                            type="text"
                            v-show="scope.row.status == '1'"
                            icon="el-icon-refresh-right"
                            @click="doCancleFlow(scope.row)"
                            v-hasPermi="['hrm:recruitPlan:edit']"
                            style="color: #ff6666"
                            >撤销申请</el-button
                        >
                        <el-button
                            size="mini"
                            type="text"
                            v-show="scope.row.status != '0'"
                            icon="el-icon-rank"
                            @click="flowDetail(scope.row)"
                            v-hasPermi="['hrm:recruitPlan:edit']"
                            >流程信息</el-button
                        >
                        <el-button
                            size="mini"
                            type="text"
                            v-show="scope.row.status != '0'"
                            icon="el-icon-view"
                            @click="handleView(scope.row)"
                            v-hasPermi="['hrm:recruitPlan:edit']"
                            >查看</el-button
                        >

                        <el-button
                            size="mini"
                            type="text"
                            v-show="
                                scope.row.finishStatus == '0' &&
                                scope.row.status == '2'
                            "
                            icon="el-icon-edit"
                            @click="setFinishStatus(scope.row, '1')"
                            v-hasPermi="['hrm:recruitPlan:edit']"
                            style="color: #6495ed"
                            >启动</el-button
                        >
                        <el-button
                            size="mini"
                            type="text"
                            v-show="
                                scope.row.finishStatus == '1' &&
                                scope.row.status == '2'
                            "
                            icon="el-icon-edit"
                            @click="setFinishStatus(scope.row, '2')"
                            v-hasPermi="['hrm:recruitPlan:edit']"
                            style="color: #6495ed"
                            >完成</el-button
                        >
                        <el-button
                            size="mini"
                            type="text"
                            v-show="
                                scope.row.finishStatus == '2' &&
                                scope.row.status == '2'
                            "
                            icon="el-icon-edit"
                            @click="setFinishStatus(scope.row, '1')"
                            v-hasPermi="['hrm:recruitPlan:edit']"
                            style="color: #6495ed"
                            >重新启动</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </TableCard>

        <FlowInfo
            :businessId="businessId"
            :billType="billType"
            v-if="showFlowInfo"
            :showStatus="showFlowInfo"
            @closeFlowInfoDialog="closeFlowInfoDialog"
        ></FlowInfo>
    </div>
</template>

<script>
import {
    delRecruitPlan,
    listRecruitPlan,
    updateRecruitPlan,
} from "@/api/hrm/recruitPlan";
import { listPostAll } from "@/api/system/post";
import { cancleFlow, submitFlow } from "@/api/workflow/processInstance";
import FlowInfo from "@/views/workflow/flow/flowInfo";

export default {
    name: "RecruitPlan",
    dicts: ["oa_flow_billstatus", "progress_status"],
    components: { FlowInfo },
    data() {
        return {
            billType: "",
            showFlowInfo: false,
            businessId: null,
            // 职位选项
            postOptions: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示查询条件
            showSearch: true,
            // 总条数
            total: 0,
            // 招聘计划表格数据
            recruitPlanList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                userId: null,
                deptId: null,
                billType: null,
                billCode: null,
                flowKey: null,
                flowInsId: null,
                submitTime: null,
                status: null,
                des: null,
                dutyUserid: null,
                planStartTime: null,
                planCompleteTime: null,
                demandId: null,
                demandDeptId: null,
                demandPostId: null,
                demandCount: null,
                sealCount: null,
                postDemand: null,
                finishStatus: null,
            },
        };
    },
    created() {
        const billType = this.$route.query && this.$route.query.billType;
        console.log("单据类型：" + billType);
        if (billType) {
            this.queryParams.billType = billType;
            this.billType = billType;
        }
        //获取岗位数据
        this.getPostData();
        this.getList();
    },
    methods: {
        getPostData() {
            listPostAll().then((res) => {
                this.postOptions = res.data;
            });
        },
        /** 查询招聘计划列表 */
        getList() {
            this.loading = true;
            listRecruitPlan(this.queryParams).then((response) => {
                this.recruitPlanList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 查询按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.$router.push({
                path: "/hrm/recruit/recruitPlan/form/add/" + this.billType,
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            const id = row.id;
            this.$router.push({
                path: "/hrm/recruit/recruitPlan/form/" + row.id,
            });
        },
        /** 查看单据详情 */
        handleView(row) {
            this.$router.push({
                path: "/hrm/recruit/recruitPlan/form/" + row.id,
                query: { readonly: "1" },
            });
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal
                .confirm('是否确认删除招聘计划编号为"' + ids + '"的数据项？')
                .then(function () {
                    return delRecruitPlan(ids);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "hrm/recruitPlan/export",
                {
                    ...this.queryParams,
                },
                `recruitPlan_${new Date().getTime()}.xlsx`
            );
        },
        //修改完成状态
        setFinishStatus(row, value) {
            let data = {
                id: row.id,
                finishStatus: value,
            };
            let msg = "成功";
            if ("1" == value) {
                msg = "需求启动成功";
            }
            if ("2" == value) {
                msg = "需求已完成";
            }
            updateRecruitPlan(data).then((response) => {
                this.$modal.msgSuccess(msg);
                this.getList();
            });
        },

        /** 提交审批 ***/
        doSubmitFlow(row) {
            let data = {
                businessId: row.id,
                billType: row.billType,
            };
            this.$modal
                .confirm("确认要提交该单据进行审批吗？")
                .then(() => {
                    return submitFlow(data);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("提交成功");
                })
                .catch(() => {});
        },
        /** 取回审批 ***/
        doCancleFlow(row) {
            let data = {
                businessId: row.id,
                billType: row.billType,
            };
            this.$modal.confirm("确认要取回该协议审批吗？").then(() => {
                cancleFlow(data).then((res) => {
                    if (200 == res.code) {
                        this.getList();
                        this.$modal.msgSuccess("取回成功");
                    }
                });
            });
        },
        /** 流程信息 ***/
        flowDetail(row) {
            this.businessId = row.id + "";
            this.showFlowInfo = true;
        },
        //关闭流程信息窗口
        closeFlowInfoDialog() {
            this.showFlowInfo = false;
        },
    },
};
</script>
